<template>
<div class="">
    <mt-header v-bind:title="msg">
    </mt-header>
    <mt-cell title="云顶之弈" @click.native="toGame" is-link ></mt-cell>
    <mt-cell title="标题文字" to="//github.com" is-link ></mt-cell>
    <mt-cell title="标题文字" to="//github.com" is-link ></mt-cell>
    <mt-tabbar v-model="selected" @click.native="next" fixed>
        <mt-tab-item id="1">
            <img slot="icon" src="../assets/home.png">
            首页
        </mt-tab-item>
        <mt-tab-item id="2">
            <img slot="icon" src="../assets/pic.png">
            图片
        </mt-tab-item>
        <mt-tab-item id="3">
            <img slot="icon" src="../assets/blog.png">
            文章
        </mt-tab-item>
        <mt-tab-item id="4">
            <img slot="icon" src="../assets/user_active.png">
            我的
        </mt-tab-item>
    </mt-tabbar>
</div>
</template>

<script>
export default {
  name: 'usercenter',
  data () {
    return {
      msg: 'user  center',
      selected : '4'
    }
  },
  methods: {
      next() {
          console.log(this.selected);
          if(this.selected == 1){
              this.$router.push('myapp') //https://router.vuejs.org/zh/guide/essentials/navigation.html
          }
          if(this.selected == 2){
              this.$router.push('images') //https://router.vuejs.org/zh/guide/essentials/navigation.html
          }
          if(this.selected == 3){
              this.$router.push('blogs') //https://router.vuejs.org/zh/guide/essentials/navigation.html
          }
          if(this.selected == 4){
              this.$router.push('user') //https://router.vuejs.org/zh/guide/essentials/navigation.html
          }
        return true;
      },
      toGame(){
        this.$router.push('game');
      }
    }
}
</script>